<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户信息',
  },
}
</route>
<template>
  <view class="personal-info-page min-h-screen bg-gray-50">
    <view class="p-6">
      <view class="flex flex-col items-center mb-8">
        <button class="relative" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <view class="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-md">
            <image :src="userInfo.avatarImage" alt="用户头像" class="w-full h-full object-cover" />
          </view>
        </button>
        <view class="text-sm text-gray-500 mt-2">点击修改头像</view>
      </view>

      <view class="bg-white rounded-lg shadow-sm overflow-hidden">
        <view class="p-4 border-b border-gray-100">
          <view class="mt-2">
            <input
              id="nickname"
              v-model="nickName"
              type="nickname"
              class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
              placeholder="请输入昵称"
              maxlength="20"
              @blur="handleGetNickname"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { http } from '@/utils/http'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const avatarUrl = ref('')
const nickName = ref('')

onLoad(() => {
  avatarUrl.value = userInfo.value.avatarImage
  nickName.value = userInfo.value.nickName
})

const upload = useUpload()

const onChooseAvatar = async (e) => {
  // 上传到服务器
  uni.uploadFile({
    url: `https://apill.jxsr.com/api/file/uploadImage`,
    filePath: e.detail.avatarUrl,
    name: 'image',
    formData: null,
    success: async (uploadFileRes) => {
      console.log(
        '%c [ uploadFileRes.data ]-67',
        'font-size:13px; background:pink; color:#bf2c9f;',
        uploadFileRes.data,
      )

      let data = JSON.parse(uploadFileRes.data)
      await http.get('/api/user/modifyInformation', { avatarImage: data.url })
    },
    fail: (err) => {
      console.error('uni.uploadFile err->', err)
    },
    complete: () => {},
  })

  // // 发送给服务器
}

const handleGetNickname = async () => {
  await http.get('/api/user/modifyInformation', { nickName: nickName.value })
}
</script>
